<template>
	<view class="container-white">
		<!--    <view class="status_bar">
      <view class="top_view"></view>
    </view> -->
		<!--   <view style="height: 100upx;">
      <view class="tab-bar">
        <view
          style="width: 40upx; height: 34upx;position: absolute;left: 30upx;top:33upx;text-align: center;"
        >
          <image
            src="/static/icon/icon-back.png"
            style="width: 20upx; height: 34upx;"
            @click="backToTopic"
          />
        </view>
        <view style="flex: 1;text-align: center;">答题卡</view>
        <view style="position: absolute;right: 30upx;text-align: center;width: 100upx;">
          <image src="/static/icon/icon-daojishi.png" style="width: 40upx;height: 24upx;" />
          <view style="font-size: 16upx;font-weight: normal;">{{remainingTime}}</view>
        </view>
      </view>
    </view> -->
		<view class="content">
			<view style="display: flex;flex-wrap: wrap;">
				<!-- <view class="options" v-for="(item,index) in scantron" :key="index">
					<view v-if="index<=num" class="stide" :class="item.answ == '' || item.answ == null || item.answ == undefind?'':'isCheck'" @tap="goTopic(index)">{{index+1}}</view>
					<view v-else  class="stide disable">{{index+1}}</view>
        </view>-->
				<view class="options" v-for="(item,index) in num" :key="index">
					<view class="stide" :class="item.checked?'isCheck':''" @tap="goTopic(index)">{{item.num}}</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<button type="primary" class="primary footer-btn" @click="hidden = true">交卷并查看结果</button>
		</view>

		<model v-if="hidden">
			<view class="model-content">交卷后将结束本次考试，确定交卷吗？</view>
			<view class="model-footer">
				<button class="model-footer-btn cancel" @click="hidden = false">取消</button>
				<button type="primary" class="model-footer-btn primary" @click="submitpaper">交卷</button>
			</view>
		</model>
	</view>
</template>

<script>
	import {
		post_md5
	} from '../../common/request'
	import {
		formatSeconds
	} from '../../common/common'
	export default {
		data() {
			return {
				scantron: [],
				params: {},
				// num: 0,
				num: [],
				hidden: false,
				duration: 0,
				remainingTime: '',
				examQuesList: []
			}
		},
		onLoad(options) {
			console.log(options)
			// this.params = {
			// 	examQuesList: JSON.stringify(this.questionList),
			// 	examScoreId: options.examScoreId,
			// 	examId:JSON.stringify(this.params.examId)
			// }
			this.courseId = options.courseId
			this.questionList = JSON.parse(options.topicList || '{}')
			this.params = JSON.parse(options.params || '{}')
			console.log(this.params)
			console.log(this.questionList)
			// this.examQuesList = JSON.parse(options.topicList || '{}')
			this.duration = options.duration
			this.num = this.questionList
				.map(x => x.userAnsw !== '' && x.userAnsw !== null)
				.map((x, i) => ({
					num: i + 1,
					checked: x
				}))
		},
		methods: {
			// 获取答题卡
			getScantron() {
				const params = {
					userId: uni.getStorageSync('userId'),
					examId: this.params.examId,
					examType: this.params.examType
				}
				post_md5('/train-app/courseexam/getquescard', params).then(res => {
					console.log(res)
					this.scantron = res.data
				})
			},

			// 查看答题卡对应题目index
			goTopic(index) {
				uni.setStorageSync('examIndex', index)
				uni.navigateBack(1)
			},
			// 确认交卷
			submitpaper() {
				const params = {
					courseId: this.courseId,
					examId: this.params.examId,
					// examQuesList: JSON.stringify(this.questionList),
					examQuesList: JSON.stringify(this.questionList.map(x => ({
						quesId: x.quesId,
						userAnsw: x.userAnsw
					}))),
					userId: uni.getStorageSync('userId')
				}
				post_md5('/train-app/courseexam/submitpaper', params).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.navigateTo({
							url: 'examination-result?id=' + res.data + '&tag=true' + '&examId=' + this.params.examId
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			backToTopic() {
				uni.navigateBack(1)
			}
		}
	}
</script>

<style>
	.content {
		background: #ffffff;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		position: absolute;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background: #ffffff;
		top: 0;
		z-index: 999;
	}

	.tab-bar {
		display: flex;
		align-items: center;
		height: 100upx;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		z-index: 100;
		color: #000000;
		font-size: 36upx;
		font-weight: bold;
		width: 100%;
		background: #ffffff;
	}

	.options {
		width: 118upx;
		display: flex;
		justify-content: center;
	}

	.stide {
		margin: 0;
	}

	.footer {
		height: 98upx;
		font-size: 28upx;
		background: #02a8f4;
	}

	.disable {
		color: #999999;
		border: 1px solid #999999;
	}
</style>

<style scoped>
	.isCheck {
		background: #02a8f4;
		color: #ffffff;
	}
</style>
